<template>
	<view class="case">
		<u-navbar>
			<view class="slot-wrap">
				<u-search
					placeholder="店铺名称/商品id"
					v-model="searchipt"
					:height="50"
					:action-text="searchipt == '' ? '录入' : '搜索'"
					:input-style="{
						height: '56rpx'
					}"
					:action-style="{
						width: '118rpx',
						height: '56rpx',
						lineHeight: '56rpx',
						backgroundColor: '#FFDB28',
						borderRadius: '60rpx',
						color: '#ffffff'
					}"
					@search="doSearch"
					@custom="doSearch"
				></u-search>
			</view>
		</u-navbar>
		<!-- 复制弹窗 -->
		<view class="popmainbox">
			<u-popup v-model="popupshow" :scrolly="false" :safe-area-inset-bottom="true" :closeable="false" border-radius="10" width="620" mode="center">
				<view class="popbox" @touchmove.stop.prevent="moveHandle">
					<view class="title u-font-16 u-flex u-col-center">
						<u-icon name="checkmark-circle-fill" color="#5FE151" size="48"></u-icon>
						<text class="u-p-l-10">{{ inde == 1 ? '领券链接复制成功' : '文案复制成功' }}</text>
					</view>
					<view class="tipsbox">
						<u-parse
							:html="content"
							:tag-style="{
								minHeight: '140rpx'
							}"
						></u-parse>
					</view>
					<view class="footerbtn">
						<u-button
							:hair-line="false"
							:custom-style="{
								width: '160rpx',
								height: '60rpx',
								backgroundColor: '#5080FF',
								border: 'none',
								color: 'white',
								marginRight: '20rpx'
							}"
							@click="popupshow = false"
						>
							确认
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="goodsList" v-if="goodsList.length">
			<view class="goodsli" v-for="(res, index) in goodsList" :key="index">
				<u-card :show-head="false" :full="true" padding="0">
					<view slot="body">
						<view class="order">
							<view class="top">
								<view class="left">
									<view class="store">{{ res.si_shopName }} {{ res.pd_itemId }}</view>
								</view>
								<view
									class="right"
									:style="{
										color: res.pd_dtkState == 9 ? '#999999' : '#5080FF'
									}"
								>
									{{ res.pd_dtkState == 9 ? '未提交' : '已提交' }}
								</view>
							</view>
							<view class="item">
								<view class="left"><image :src="res.pd_goodsImgUrl" mode="aspectFill"></image></view>
								<view class="content">
									<view class="title u-line-2">{{ res.pd_subTitle }}</view>
									<view class="price">
										<view class="price_left">
											<view class="oldprice u-m-r-8">
												{{ res.pd_goodsPrice }}
												<!-- .toFixed(2) -->
											</view>
											￥{{ res.pd_goodsCouponPrice }}
											<!-- <text class="decimal">.{{ res.couponZkFinalPrice }}</text> -->
										</view>
										<view class="price_right">
											<view class="cominfo u-m-r-8">
												佣金
												<text class="numinfo">{{ res.pd_commissionRate }}</text>
												%
											</view>
											<view class="cominfo">
												服务费
												<text class="numinfo">{{ res.pd_serviceRate }}</text>
												%
											</view>
										</view>
									</view>

									<view class="type u-flex u-row-between">
										<text>{{ res.pd_couponStartTime }} 至 {{ res.pd_couponEndTime }}</text>
										<view class="u-flex">
											<text>出单 {{ res.pd_issue_num }}</text>
											<text>服务费 ￥{{ res.pd_issue_service_fee }}</text>
										</view>
									</view>
									<view class="type" style="text-align: right;">{{res.pd_mark}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wrap" slot="foot" style="padding: 14rpx;">
						<u-row gutter="12" justify="space-between">
							<u-col span="3"><view @click="copyData(res.pd_couponUrl, 1)" class="link" style="text-align: center;">领券购买</view></u-col>
							<u-col span="3"><view @click="copyData(res, 2)" class="link" style="text-align: center;">生成文案</view></u-col>
							<u-col span="3"><view @click="gorepeat(1,res.pd_id)" class="link" style="text-align: center;">续单</view></u-col>
							<u-col span="3"><view @click="gorepeat(2,res)" class="link" style="text-align: center;">编辑</view></u-col>
						</u-row>
					</view>
				</u-card>
			</view>
			<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent"/>
		</view>
		<u-empty v-else text="Sorry,暂无数据" mode="data" :marginTop="40"></u-empty>
		<!-- <u-back-top :scroll-top="scrollTop" :top="600"></u-back-top> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
import { pathToBase64, base64ToPath } from '@/js_sdk/image-tools/index.js';
export default {
	name: 'haha',
	data() {
		return {
			inde: 1,
			page: 1,
			height: '181px',
			status: 'loadmore',
			searchipt: '',
			popupshow: false,
			// poptitle: ,
			content: '',
			goodsList: [
				// {
				// 	pd_id: 173160, //自增id
				// 	pd_itemId: '50013870', //商品id
				// 	pd_goodsImgUrl: 'https://img.alicdn.com/imgextra/i1/2507082560/O1CN014M6ESG1UmWV3DQCfi_!!2507082560.jpg', //主图url
				// 	pd_subTitle: '测试短标题', //短标题
				// 	pd_goodsPrice: '50.00', //商品原价
				// 	pd_goodsCouponPrice: '40.00', //商品优惠价
				// 	pd_commissionRate: '20', //佣金比例
				// 	pd_serviceRate: '10', //服务费率
				// 	pd_mark: '备注', //备注
				// 	pd_couponActivityId: 'be525d3795f647848b877b39f896fa41', //优惠卷id
				// 	pd_couponUrl: 'https://uland.taobao.com/quan/detail?sellerId=2206619857501&activityId=be525d3795f647848b877b39f896fa41&pid=mm_0_0_0', // 优惠卷链接
				// 	pd_superUrl: 'https://img.alicdn.com/imgextra/i1/2507082560/O1CN014M6ESG1UmWV3DQCfi_!!2507082560.jpg', //营销图url
				// 	pd_writing: '商品文案', //商品文案
				// 	pd_dtkState: 9, //是否提交（pd_dtkState，pd_hdkState，pd_shzState都是9是未提交，否则已提交）
				// 	pd_hdkState: 9,
				// 	pd_shzState: 9,
				// 	pd_issue_num: 0, //出单数量
				// 	pd_issue_service_fee: '0.00', // 服务费
				// 	si_shopName: '钻盾饰品旗舰店', //店铺名称,
				// 	pd_couponStartTime: '	98-2',
				// 	pd_couponEndTime: '98-2'
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	watch: {
		searchipt: function(val) {
			if (val == '') {
				this.getpaodangoods(1, 10);
			}
		}
	},
	onLoad(option) {},
	// onPageScroll(e) {
	// this.scrollTop = e.scrollTop;
	// },
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		this.getpaodangoods(this.page, 10, this.searchipt);
	},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {
		this.getpaodangoods(1, 10);
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		gorepeat(val,id){
			if(val==1){
				
			uni.navigateTo({
				url:"/pages/managegoods/repeatorder?id="+id
			})
			}else{
				uni.navigateTo({
					url:"/pages/managegoods/compileorder?item="+ encodeURIComponent(JSON.stringify(id))
				})
			}
		},
		getpaodangoods(page, pagesize, search) {
			this.$u.api
				.getpaodangoods({
					page: page,
					pagesize: pagesize,
					search: search == undefined ? '' : search
				})
				.then(res => {
					// console.log(res);
					if (res.code == 200) {
						let arr=res.data.data
						for(let i in arr){
							arr[i].pd_couponStartTime=arr[i].pd_couponStartTime.substring(5,10);
							arr[i].pd_couponEndTime=arr[i].pd_couponEndTime.substring(5,10);
						}
						this.goodsList.push(...arr);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		moveHandle() {
			return;
		},
		copyData(data, type) {
			this.inde = type;
			if (type == 1) {
				uniCopy({
					content: data,
					success: res => {
						console.log(data);
						// let str=data+'';
						this.content = `<view class="u-line-4">` + data + `</view>`;
						this.popupshow = true;
					},
					error: e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000
						});
					}
				});
			} else {
				// this.content=data;
				var that = this;
				let str =
					'<div id="foo2"><div> <img src=' +
					data.pd_goodsImgUrl +
					' style="width:118px"></img></div><div>' +
					data.pd_subTitle +
					'</div><div>' +
					'原价【' +
					data.pd_goodsPrice +
					'】元，券后价【' +
					data.pd_goodsCouponPrice +
					'】元' +
					'</div><div>' +
					'领券：' +
					data.pd_couponUrl +
					'</div><div>' +
					'抢购：https://detail.tmall.com/item.htm?id=' +
					data.pd_itemId +
					'</div><div>' +
					data.pd_writing +
					'</div></div>';
				let str2 =
					data.pd_subTitle +
					'\n' +
					'原价【' +
					data.pd_goodsPrice +
					'】元，券后价【' +
					data.pd_goodsCouponPrice +
					'】元' +
					'\n' +
					'领券：' +
					data.pd_couponUrl +
					'\n' +
					'抢购：https://detail.tmall.com/item.htm?id=' +
					data.pd_itemId +
					'\n' +
					data.pd_writing;
				uniCopy({
					content: str2,
					success: res => {
						this.content = `<view>` + str + `</view>`;
						// #ifdef  MP
						uni.downloadFile({
							url: data.pd_goodsImgUrl,
							success: res => {
								if (res.statusCode === 200) {
									// console.log('app', res.tempFilePath);
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: res => {
											that.$refs.uToast.show({
												title: '图片已保存',
												type: 'success'
											});
										},
										fail: err => {
											that.$refs.uToast.show({
												title: '保存失败',
												type: 'error'
											});
										}
									});
								}
							},
							fail: res => {
								uni.hideLoading();
							}
						});
						// #endif

						// #ifdef APP-PLUS
						uni.getImageInfo({
							src: data.pd_goodsImgUrl,
							success(image) {
								console.log(image.path);
								uni.saveImageToPhotosAlbum({
									filePath: image.path,
									success: () => {
										that.$refs.uToast.show({
											title: '图片已保存',
											type: 'success'
										});
									}
								});
							}
						});
						// #endif

						// #ifdef H5
						uni.downloadFile({
							url: data.pd_goodsImgUrl, //这里为图片路径
							success: res => {
								if (res.statusCode === 200) {
									pathToBase64(res.tempFilePath)
										.then(base64 => {
											let url = base64;
											var oA = document.createElement('a');
											oA.download = 'letui_'+that.$u.random(1, 10000); 
											oA.href = url;
											oA.click();
											document.body.appendChild(oA);
											oA.remove(); // 下载之后把创建的元素删除
										})
										.catch(error => {
											console.error(error);
										});
								}
							}
						});
						// #endif
						this.popupshow = true;
					},
					error: e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000
						});
					}
				});
			}
		},

		// gotypein() {
		// 	uni.reLaunch({
		// 		url: '/pages/attrtypein/attrtypein'
		// 	});
		// },

		doSearch() {
			if (this.searchipt == '') {
				uni.navigateTo({
					url: '/pages/attrtypein/attrtypein'
				});
			} else {
				// console.log(this.searchipt);
				this.getpaodangoods(1, 10, this.searchipt);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.case {
	background-color: $lt-bg;
	min-height: 100vh;
	.slot-wrap::v-deep {
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 20rpx;
		.u-content{
			height: 56rpx!important;
		}
	}
	.slot-content {
		background-color: #ffffff;
		padding: 0 24rpx 24rpx 24rpx;

		.item-box {
			// margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 28rpx;

			.item {
				// border: 1px solid $u-type-primary;
				color: #787882;
				padding: 8rpx 20rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
				background-color: #dfdfdf;
			}

			.active {
				color: #292930;
				// background-color: $u-type-primary;
			}
		}
	}
	.popmainbox {
		.popbox {
			padding: 24rpx;
			position: relative;
			.tipsbox {
				width: 540rpx;
				min-height: 140rpx;
				margin: 30rpx auto 60rpx auto;
			}
			.footerbtn {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
			}
		}
	}
	.goodsList {
		padding-bottom: 40rpx;
		.goodsli {
			width: 696rpx;
			margin: 0 auto;
			.order {
				width: 672rpx;
				background-color: #ffffff;
				margin: 0 auto;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 28rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.store {
							// margin: 0 10rpx;
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.right {
						color: $u-type-warning-dark;
					}
				}

				.item {
					display: flex;
					margin: 18rpx 0 0;

					.left {
						margin-right: 20rpx;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx;
						}
					}

					.content {
						width: 462rpx;

						.title {
							// width: 462rpx;
							font-size: 28rpx;
							// line-height: 50rpx;
						}

						.type {
							margin: 8rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}

						.price {
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.oldprice {
								text-decoration: line-through;
								color: rgba(153, 153, 153, 1);
							}

							.price_left {
								display: flex;
								justify-content: flex-start;
								align-items: center;
							}

							.price_right {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

								// width: 260rpx;
								.cominfo {
									color: rgba(153, 153, 153, 1);

									.numinfo {
										color: #333333;
									}
								}
							}
						}
					}
				}

				.bottom {
					margin-top: 18rpx;

					.btntype1 {
						display: flex;
						justify-content: flex-end;
						align-items: center;
					}

					.btn2 {
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
					}
				}
			}
		}
	}
}
</style>
